<template>
  <el-form
    hide-required-asterisk
    class="form"
    size="small"
    ref="form"
    :model="form"
    :rules="rules"
    label-width="77px"
    :show-message="false">
    <el-form-item :label="$t('类型')">
      <el-select class="full-width" disabled v-model="form.type" :placeholder="$t('请选择')">
        <el-option
          v-for="(o) in fileTypeOpts"
          :key="o.value"
          :value="o.value"
          :label="o.label">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('目录')">
      <el-select-tree
        class="full-width"
        disabled
        v-model="form.folderId"
        :placeholder="$t('请选择')"
        :data="treeData"
        :props="{
          value: 'id',
          label: 'name',
          children: 'children'
        }">
      </el-select-tree>
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <el-form-item :label="$t('起始频率')">
          <el-input-number
            v-model="form.attributes.begin"
            :controls="false"
            :precision="0"
            :min="0"
            :max="999999999"
            class="input-140"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item class="label-ml9" :label="$t('终止频率')">
          <el-input-number
            v-model="form.attributes.end"
            :controls="false"
            :precision="0"
            :min="form.attributes.begin"
            :max="999999999"
            class="input-140"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item :label="$t('终端分组')">
      <el-select-tree
        class="full-width"
        :placeholder="$t('请选择终端分组')"
        :props="{
          value: 'id',
          label: 'name',
          owner: 'owner',
          children: 'children'
        }"
        :data="devieTreeData"
        :disabled-values="[]"
        v-model="groupId"
        :check-strictly="true"
        :clearable="false"
        :default-expand-all="true"
        @change="handleSelectChange"
      ></el-select-tree>
    </el-form-item>
    <div>
      <list
        height="249px"
        :list-data="listData"
        :list-cols="listCols"
        :highlight="true"
        @row-click="getCurrentRow"
        :action-opts="actionOpts"
      ></list>
    </div>
  </el-form>
</template>

<script>
import List from '@/components/List'
import { fileTypeOpts } from '../../const'
import { createNamespacedHelpers } from 'vuex'
const {mapGetters} = createNamespacedHelpers('media')

export default {
  components: {
    List
  },
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    rules: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      inputValue: '',
      listData: [],
      listCols: [{
        prop: 'name',
        label: '名称',
        sortable: true,
        align: 'left'
      }],
      actionOpts: { show: false },
      groupId:'',
      devieTreeData:[],
      currentRow: null,
      currentIndex: -1,
      fileTypeOpts
    }
  },
  methods: {
    //终端分组树
    loadTerminalTreeData() {
      this.devieTreeData = [{
        id: 0,
        name: this.$t('终端分组'),
        type:1,
        children: []
      }]
      let params = { 'type':'1' }
      this.$store.dispatch('device/doLoadTree', params).then((res) => {
        if(res) {
          res.forEach(item => {
            this.devieTreeData[0].children.push(item)
          })
        }
      })
    },
    getDeviceList(){
      var queryData = {}
      queryData.online = true
      queryData.groupId = this.groupId

      this.$store.dispatch('device/deviceListByGroup', queryData).then((res) => {
        if(res) {
          this.listData = res? res: []
        }
      })
    },
    handleSelectChange(){

      this.currentRow = null
      this.currentIndex = -1
      this.form.attributes.terminalId = ''

      this.getDeviceList()
    },
    getCurrentRow(row, column, event) {
      this.currentRow = row
      let idx = 0
      try {
          this.listData.forEach(item => {
              if(item.index === row.index) {
                  throw Error()
              }
              idx = idx + 1
          })
      } catch (e) {console.log(e)}
      this.currentIndex = idx
      this.form.attributes.terminalId = row.id
    },
    initMethod(opType){
      if (opType === '1') {
        //添加
        this.groupId=''
        this.devieTreeData=[]
        this.currentRow=null
        this.currentIndex = -1
        this.listData = []
      }else{
        //编辑
        
      }
      this.loadTerminalTreeData()
    },

  },
  computed: {
    ...mapGetters(['menuTree']),
    treeData() {
      return this.menuTree(1)
    },
  },
  created(){
    this.$nextTick(()=>{
      this.loadTerminalTreeData()
      this.$eventBus.$on('initMethod', this.initMethod)
    })
  },
  beforeDestroy() {
    this.$eventBus.$off('initMethod')
  },

}
</script>

<style lang="scss" scoped>
.form {

  .full-width {
    width: 380px;
  }
  .input-140 {
    width: 140px;
  }

  ::v-deep .el-form-item {
    margin-bottom: 15px;
  }
  .label-ml9 {
    ::v-deep .el-form-item__label {
      margin-left: 8px;
    }
  }
}
</style>